<template>
  <div @scroll="scroll" ref="div" class="scroll-box">
    <div class="scroll-div" v-for="i in value" :key="i">
      {{ i }}
    </div>
  </div>
</template>

<script>
export default {
  name: "scrollPaging",
  data() {
    return {
      containerHeight: 0, //获取容器高度
      contentHeight: 0, //加载数据内容高度
      pageNum: 1, //页数
      pageSize: 4, //条数
      isPullupLoadData: true, //是否继续请求
      value: 5
    };
  },
  methods: {
    scroll() {
      var scrollTop = this.$refs.div.scrollTop;
      this.containerHeight = this.$refs.div.offsetHeight;
      this.contentHeight = this.$refs.div.scrollHeight;
      if (this.isPullupLoadData == true) {
        if (scrollTop + this.containerHeight > this.contentHeight - 30) {
          this.isPullupLoadData = false;
          this.pageNum = this.pageNum + 1;
          // 接口
          this.value += 2;
          this.isPullupLoadData = true;
        }
      }
    }
  }
};
</script>

<style lang="less" scoped>
.scroll-box {
  height: 100%;
  width: 100%;
  .scroll-div {
    height: 200px;
    border: #758a99 1px solid;
    margin: 20px;
    text-align: center;
    line-height: 200px;
    color: #758a99;
    background: #e3f9fd;
  }
}
</style>
